<template>
	<div class="house-detail-contain">
		<Box id="box" :house="house"></Box>
		<div class="house-detail-title" style="text-align: left;padding: 10px 20px;font-size: 20px;">
			{{house.title}}{{house.room}}室{{house.hall}}厅{{house.bathroom}}卫{{countPrice}}万元
		</div>
		<el-row>
			<el-col :span="14">
				<div style="margin-right: 30px;">
					<el-carousel trigger="click" height="300px">
						<el-carousel-item v-for="(fileName,i) in house.imgFileNames" :key="i">
							<img :src="imgUrlBase+fileName"
								style="height: 300px;object-fit: contain;">
						</el-carousel-item>
					</el-carousel>
				</div>
			</el-col>
			<el-col :span="10">
				<div class="detail">
					<el-row>
						<el-col :span="12">
							<p>售价：<span
									style="font-size: 18px;color: #f56140;padding-right: 4px;font-weight: bold;">{{countPrice}}</span><span>万元</span>
							</p>
							<p>单价：<span>{{house.price}}元/㎡</span></p>
							<p>面积：<span>{{house.area}}㎡</span></p>
							<p>区域：<span>{{getZone}}</span></p>
							<p>小区名称：<span>{{house.village}}</span></p>
						</el-col>
						<el-col :span="12">

						</el-col>
					</el-row>
				</div>
			</el-col>
		</el-row>
		<div class="house-detail-content">
			<h1 style="margin: 0">详细介绍</h1>
			<el-divider></el-divider>
			<p>{{house.details}}</p>
		</div>
		<div class="house-detail-saler">
			<h1 style="margin: 0">联系方式</h1>
			<el-divider></el-divider>
			<div v-show="house.salerId">
				<p>联系人名称：{{saler.name}}先生</p>
				<p>联系人电话：{{saler.phone}}</p>
			</div>
			<div v-show="house.adminId">
				<p>经理名称：{{admin.name}}先生</p>
				<p>经理电话：{{admin.phone}}</p>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getHouseById
	} from '@/api/house'
	import {
		getSalerById
	} from '@/api/user'
	import {
		getHouseAdminById
	} from '@/api/admin'
	import Box from './components/box'
	export default {
		components: {
			Box
		},
		data() {
			return {
				id: 0,
				house: {},
				imgUrlBase: 'https://home-y.oss-cn-hangzhou.aliyuncs.com/',
				saler: {},
				admin: {}
			}
		},
		created() {
			this.id = this.$route.query.id
			this.getHouseData()
		},
		methods: {
			async getHouseData() {
				const res = await getHouseById(this.id)
				if (res.code === 1) {
					this.house = res.data
				}
				console.log(res.data)
				this.getSalerData()
			},
			async getSalerData() {
				if (this.house.salerId) {
					const res = await getSalerById(this.house.salerId)
					if (res.code === 1) {
						this.saler = res.data
					}
				}

				if (this.house.adminId) {
					const res = await getHouseAdminById(this.house.adminId)
					if (res.code === 1) {
						this.admin = res.data
					}
				}
			}
		},
		computed: {
			countPrice() {
				return parseInt(this.house.price * this.house.area / 10000)
			},
			getZone() {
				const zone = this.$store.getters.zones[this.house.zoneId - 1]
				if (zone) {
					return zone.label
				}
			},
		}
	}
</script>

<style scoped>
	#box {
		padding: 15px;
		width: 305px;
		height: 350px;
		margin-top: 50px;
		position: fixed;
		right: 80px;
		top: 100px;
		background: #f3f5f8;
		z-index: 9;
	}

	.house-detail-content h1,
	.house-detail-saler h1 {
		color: green;
	}

	.house-detail-content,
	.house-detail-saler {
		text-align: left;
		padding: 20px 20px;
		margin-bottom: 20px;
	}

	.el-row .detail span {
		color: #999;
		font-weight: normal;
	}

	.el-row .detail p {
		color: #333;
		padding-right: 4px;
		height: 33px;
		line-height: 33px;
		font-weight: bold;
	}

	.el-row .detail {
		background-color: white;
		height: 300px;
		text-align: left;
		padding: 0 20px;
	}

	.house-detail-contain {
		width: 880px;
		margin: 0 auto;
	}

	.house-detail-contain>.el-row {
		margin-bottom: 20px;
		padding: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}
</style>
